<template>
  <div class="left-menu" >
    <div class="menu-header" @click="toggleMenu()">
      <Icon type="arrow-left-b" v-if="collapseState === 'on'"></Icon>
      <Icon type="arrow-right-b" v-if="collapseState === 'off'"></Icon>
    </div>
    <Menu active-name="partner" width="auto">
      <div class="layout-logo-left"></div>
      <router-link :to="menu.url" v-for="menu in menus">
        <Menu-item name="menu.name">
          <Icon :type="menu.icon" :size="iconSize"></Icon>
          <span v-if="collapseState === 'on'" v-text="menu.name"></span>
        </Menu-item>
      </router-link>
    </Menu>
  </div>
</template>

<script>
  export default {
    components: {},
    name: 'left-menu',
    props: ['module-name'],
    data: function () {
      return {
        collapseState: 'on',
        menus: []
      }
    },
    created () {
      this.fetchData()
    },
    computed: {
      iconSize () {
        return this.collapseState === 'on' ? 14 : 24
      }
    },
    methods: {
      toggleMenu () {
        this.$emit('toggleParentSpan')
        this.collapseState === 'on' ? this.collapseState = 'off' : this.collapseState = 'on'
      },
      fetchData () {
        let currentTime = new Date().getTime()
        this.$http.get('/sys/menu/list?parentId=' + this.$route.query.menuId + '&retime=' + currentTime).then(response => {
          if (response.data.success !== true) {
            this.$Message.error(response.data.message)
          } else {
            this.menus = response.data.obj.list
          }
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .left-menu {
    padding: 0 5px 0;
  }
  .menu-header {
    height:30px;
    width: auto;
    background: #fff;
    text-align: center;
    line-height: 30px;
    color: #7c7c7c;
    font-size: 20px;
    border-right: 1px solid transparent;
    border-color: #d7dde4;
  }
  .ivu-menu-vertical .ivu-menu-item {
    cursor: pointer;
    padding: 14px;
    position: relative;
    transition: all 0.2s ease-in-out 0s;
    z-index: 1;
  }
</style>
